<template>
  <div class="pos-f context-right-menu"
       :style="menuPosition"
       v-show="showMenu"
  >
    <template v-if="showMenuType === 'list'">
      <div class="item" @click="onClickMenuButton('onClickListMenuRename')">
        <i class="el-icon-edit-outline"></i> 重命名
      </div>
      <div class="item" @click="onClickMenuButton('onClickListMenuDelete')">
        <i class="el-icon-delete"></i> 删除
      </div>
    </template>

    <template v-if="showMenuType === 'tree'">

      <div class="item" @click="onClickMenuButton('onClickTreeMenuRename')">
        <i class="el-icon-edit-outline"></i> 重命名
      </div>
      <div class="item" @click="onClickMenuButton('onClickTreeMenuAddFolder')">
        <i class="el-icon-folder-add"></i> 添加子目录
      </div>
      <div class="item" @click="onClickMenuButton('onClickTreeMenuDelete')">
        <i class="el-icon-delete"></i> 删除
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import {onBeforeUnmount, reactive, ref} from "vue";
import {CommonListener} from "@/utils/listener.utils";

export default {
  name: 'gnb-right-menu',
  mixins: [],
  components: {},
  props: {},
  data() {
    return {}
  },
  setup() {

    const menuPosition = reactive({left: '0px', top: '0px'});
    const showMenu = ref(false);
    const showMenuType = ref('list');
    const menuTarget = ref(null);

    const onClickMenuButton = (event) => {
      CommonListener.trigger(event, menuTarget.value);
    }

    const removeListener = CommonListener.addListener("showRightMenu", (e, type, target) => {
      menuTarget.value = target;
      showMenuType.value = type;
      showMenu.value = true;
      menuPosition.left = e.clientX + 15 + 'px';
      menuPosition.top = e.clientY + 10 + 'px';
    })

    const windowOnClick = () => {
      showMenu.value = false;
    }

    window.addEventListener('click', windowOnClick);

    onBeforeUnmount(() => {
      window.removeEventListener('click', windowOnClick);
      removeListener();
    })

    return {
      menuPosition,
      showMenu,
      showMenuType,

      onClickMenuButton,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {}
};
</script>

<style scoped lang="less">
.gnb-right-menu {

}
</style>